/**
 * 1.监听用户（键盘）按键（手势）事件
 * 2.当用户触发了对应的动作
 *      
 */


 /**
  * 把问题数据化
  */
/**
 * [2,2,2,2] => [4,4,0,0]
 * [2,0,2,2] => [4,2,0,0]
 * [2,4,2,2] => [2,4,4,0]
 * [2,4,4,2] => [2,8,2,0]
 * [0,2,0,2] => [4,0,0,0]
 */

class Init {
    constructor(){
        this.imgs = null;
        this.random = null;
        this.num = 0;
        this.overs = [];
    }
    start(){
        this.imgs = document.querySelectorAll('img');
        this.create();
        this.keyDown();
    }
    create(){
        this.random = Math.floor(Math.random() * this.imgs.length);
        // 判断当前位置无值可以放一张新的图片,否则重新随机一个位置
        if(this.imgs[this.random].getAttribute('value') == 0){
            this.imgs[this.random].setAttribute('value',2);
            this.imgs[this.random].src = '/2048/img/cube_2.png';
        }else{
            this.create();
        }
    }
    keyDown(){
        let _this = this;
        document.onkeydown = function(e){
            
            switch(e.keyCode){
                case 37:
                    // ←
                    console.log('←');
                    _this.run([0,1,2,3]);
                    _this.run([4,5,6,7]);
                    _this.run([8,9,10,11]);
                    _this.run([12,13,14,15]);

                    break;
                case 38:
                    // ↑
                    console.log('↑');
                    _this.run([0,4,8,12]);
                    _this.run([1,5,9,13]);
                    _this.run([2,6,10,14]);
                    _this.run([3,7,11,15]);

                    break;
                case 39:
                    // →
                    console.log('→');
                    _this.run([3,2,1,0]);
                    _this.run([7,6,5,4]);
                    _this.run([11,10,9,8]);
                    _this.run([15,14,13,12]);

                    break;
                case 40:
                    // ↓
                    console.log('↓');
                    _this.run([12,8,4,0]);
                    _this.run([13,9,5,1]);
                    _this.run([14,10,6,2]);
                    _this.run([15,11,7,3]);

                    break;
            }
            _this.create();
        }
    }
    _2048(arr){
        /**
         * 根据arr得到一个新的newArr
         * 
         * 设置一个指针i,默认为0
         * 获取i的值
         *     当i的值为空,进入下一轮
         *     当i的值不为空
         *        设置j=i+1
         *        获取j的值
         *        比较i和j的值
         *            如果i的值不等于j的值
         *                把i的值添加到newArr中
         *                进入下一轮
         *            如果i的值等于j的值 
         *                把i+j的值相加，添加到newArr中
         *                i=j+1
         *  
         */

        let newArr = [];
        for(let i = 0; i < arr.length; i++){
            if(arr[i] != 0){
                // 判断j的值是不是0
                for(let j = i+1; j < arr.length; j++){
                    if(arr[j] != 0){
                        break;
                    }
                }

                let j = i + 1;
                if(arr[i] != arr[j]){
                    newArr.push(arr[i]);
                } else {
                    newArr.push(arr[i] + arr[j]);
                    i = j;
                }
            }
        }

        //数组补0操作 保证返回的新数组长度
        for(let i = 0; i < arr.length; i++){
            if(!newArr[i]){
                newArr[i] = 0;
            }
        } 

        return newArr;
    }
    run(arr){ //[0,1,2,3]
        let newValue = this._2048([
            Number(this.imgs[arr[0]].getAttribute('value')),
            Number(this.imgs[arr[1]].getAttribute('value')),
            Number(this.imgs[arr[2]].getAttribute('value')),
            Number(this.imgs[arr[3]].getAttribute('value')),
        ]);

        for(let i = 0; i < arr.length; i++){
            this.imgs[arr[i]].setAttribute('value',newValue[i]);
            this.imgs[arr[i]].src = '/2048/img/cube_' + newValue[i] + '.png';
        }
    }
}

let init = new Init();
init.start();

